<template>
  <div
    v-if="bannerData"
    class="airplane relative"
    :style="{ backgroundImage: `url(${backgroundImg})`, height: bannerHeight }"
  >
    <div class="wrap-container">
      <div class="wrap-px">
        <div class="content">
          <div class="content__inner">
            <div class="title" v-html="bannerData.title"></div>
            <div
              class="description"
              v-html="bannerData.descri.replace(/\r\n/gi, '<br/>')"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow-down" @click="scrollToNextPage">
      <span>{{ $t("content.home.slide_down") }}</span>
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M3 13L12 19L21 13" stroke="white" stroke-width="2" />
        <path d="M3 6L12 12L21 6" stroke="white" stroke-width="2" />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { postBannerList } from "../../../api/banner";
import { useRoute } from "vue-router";
import { watch, onBeforeMount, ref, computed, onMounted } from "vue";
import type { BannerItem } from "../../../types/banner";
import { useCacheStore, useGlobalStore } from "../../../store";
const bannerData = ref<BannerItem>();
const cacheStore = useCacheStore();
const globalStore = useGlobalStore();
const scrollToNextPage = () => {
  let headerHeight = document
    .querySelector("#app-header")
    ?.getBoundingClientRect().height;
  let top = window.innerHeight - headerHeight!;
  window.scrollTo({
    top,
    behavior: "smooth",
    left: 0,
  });
};
const bannerHeight = ref("");
const getBannerData = async () => {
  // if (!(globalStore.navHeaderList && globalStore.navHeaderList.length > 0))
  //   return;
  // let type_id = globalStore.navHeaderList[0].route_url
  //   .split("?")[1]
  //   .split("=")[1];
  // if (!type_id) {
  //   return;
  // }
  // bannerHeight.value = `calc(${window.innerHeight}px - var(--yd-header-height))`;
  // if (cacheStore.bannerData[type_id - 1]) {
  //   bannerData.value = cacheStore.bannerData[type_id - 1];
  //   return;
  // }
  let res = await postBannerList(1);
  if (res.code === 200) {
    bannerData.value = res.data[0];
    // cacheStore.bannerData[type_id - 1] = bannerData.value;
  }
};

const route = useRoute();

watch(
  route,
  () => {
    if (process.server) {
      getBannerData();
    }
  },
);
getBannerData();
watch(
  () => globalStore.navHeaderList,
  () => {
    if (process.server) {
      getBannerData();
    }
  }
);
const backgroundImg = computed(() => {
  return bannerData.value.single_pic;
});
</script>
<style scoped lang="less">
@import url("./media-banner1.less");
.arrow-down {
  display: none;
}
.airplane {
  min-height: calc(100vh - var(--yd-header-height));
  box-sizing: border-box;
  background: #5aa2d1;
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  .bgImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
  }
  .title {
    font-size: 64px;
    color: #172026;
    margin-bottom: 32px;
    span {
      color: #3d88f2;
    }
  }
  .description {
    font-size: 24px;
    color: #36434d;
  }
}
</style>
